var tabs = [{
		id: 0,
		name: '可使用',
		selected: true
	}, {
		id: 1,
		name: '已使用',
		selected: false
	},
	{
		id: 2,
		name: '已失效',
		selected: false
	}
];

$(() => {
	initTabs();
	loadData();
	loadDone();
	loadOverdue();
	initListener();
})

initListener = () => {
	$("#load_layout").on('click', () => {
		loadData();
	});
	$("#load_layout2").on('click', () => {
		loadDone();
	});
	$("#load_layout3").on('click', () => {
		loadOverdue();
	});
	$(".footer").on('click', () => {
		navigateTo(`products.html`)
	});
}

loadData = () => {
	let list = genCouponList(0, res => {
		hideLoading();
		if (res.code == 200) {
			let data = res.data;
			if (ArrayEmpty(data)) {
				setLoadState('stateUlr', noData());
			} else {
				setList(0, data, 'list')
			}
		} else {
			setLoadState('stateUlr', loginFail());
		}
	})
}

loadDone = () => {
	let list = genCouponList(1, res => {
		hideLoading2();
		if (res.code == 200) {
			let data = res.data;
			if (ArrayEmpty(data)) {
				setLoadState2('stateUlr', noData());
			} else {
				setList(1, data, 'list_done')
			}
		} else {
			setLoadState2('stateUlr', loginFail());
		}
	})
}

loadOverdue = () => {
	let list = genCouponList(2, res => {
		hideLoading3();
		if (res.code == 200) {
			let data = res.data;
			if (ArrayEmpty(data)) {
				setLoadState3('stateUlr', noData());
			} else {
				setList(2, data, 'list_right')
			}
		} else {
			setLoadState3('stateUlr', loginFail());
		}
	})
}

setList = (index, mlist, displayId) => {
	$(`#${displayId}`).html('');
	mlist.map((e, i) => {
		let bgColor = '',
			statusItem = '';
		if (index == 0) {
			bgColor = 'linear-gradient(45deg, orange, red)';
			statusItem = `<button class="btn" onclick="getItem(${e.key})">去使用</button>`;
		} else if (index == 1) {
			bgColor = '#9f9f9f';
			statusItem = `<img src="../../img/ic_used.png" class="status_icon"/>`
		} else if (index == 2) {
			bgColor = '#dfdfdf';
			statusItem = `<img src="../../img/ic_overdue.png" class="status_icon"/>`
		}

		let itemHtml = `<div class="coupon_card">
							<div class="item" style="background:${bgColor}">
								<div class="card_left">
									<div>
										<span class="value">${e.value}</span>
										<span class="unit">元</span>
									</div>
									<span class="des">${e.desc}</span>
								</div>
								<div class="card_right">
									<div class="left">
										<span class="title">${e.title}</span>
										<span class="time">${e.timeLimit}</span>
									</div>
									${statusItem}
								</div>
							</div>
						</div>`;
		$(`#${displayId}`).append(itemHtml)
	})
}

getItem = (id) => {

}

initTabs = () => {
	$("#tab_list").html('')
	tabs.forEach((e, i) => {
		let id = e.id;
		let itemHtml = `<input type="radio" id="${id}" name="tabs" class="tab_input" readonly="readonly" ${e.selected ? 'checked' :''} onchange="onInputChange(this)"/>
						<label class="tab" for="${id}">
							<span class="tab_text">${e.name}</span>
						</label>`;
		$("#tab_list").append(itemHtml)
	})
}

onInputChange = (e) => {
	let id = e.id;
	if (id == 0) {
		$("#part_right").hide(300);
		$("#part_middle").hide(300);
		$("#part_left").show(300);
	} else if (id == 1) {
		$("#part_right").hide(300);
		$("#part_left").hide(300);
		$("#part_middle").show(300);
	} else if (id == 2) {
		$("#part_left").hide(300);
		$("#part_middle").hide(300);
		$("#part_right").show(300);
	}
}
